<!doctype html>
<html class="">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1, user-scalable=no"/>
    <meta name="format-detection" content="telephone=no"/>

    <title>{$textinfo.title}</title>
    <link rel="stylesheet" type="text/css" href="__ADDON__/aform/css/globalMobile.css">

    <link rel="stylesheet" type="text/css" href="__ADDON__/aform/css/registerForm.css">
    <link rel="stylesheet" type="text/css" href="__ADDON__/aform/css/jquery.upload.css">

    <script src="__ADDON__/aform/js/rem.js"></script>
</head>
<body>
<div class="pageBox" style="min-height: 100%;">
    <div class="center">
        {if condition="$textinfo.imgs"}
        <img src="{$textinfo.imgs}" alt="">
        {/if}
    </div>
    <div class="registerBox">
        <div class="section01">
            <div class="pageTitle center">
                <div class="textBox re">
                    <img src="__ADDON__/aform/images/mobile/titleLeftIcon.png" alt="" class="ab leftIcon">
                    {$textinfo.title}
                    <img src="__ADDON__/aform/images/mobile/titleRightIcon.png" alt="" class="ab rightIcon">
                </div>
            </div>
            <div class="infor">{$textinfo.content}</div>
        </div>

        <form class="section02" id="new_entry" data-form-token="jCJsAQ" data-validate-url="" action=""
              accept-charset="UTF-8" method="post" onsubmit="return isPhoneNum()">
            {:token()}
            <div class="">
                <h3 class="smallTitle">您的姓名</h3>
                <ul class="inputBox">
                    <li class="radius5 re">
                        <img src="__ADDON__/aform/images/mobile/icon01.png" alt="" class="ab pic">
                        <input name="name" type="text" class="radius0 ab inputElement" placeholder="请输入姓名"
                               autocomplete="off" required/>
                    </li>
                </ul>

                {switch name="$textinfo.isweixin" }
                {case value="1" }
                <h3 class="smallTitle">您的微信</h3>
                <ul class="inputBox">
                    <li class="radius5 re">
                        <img src="__ADDON__/aform/images/mobile/icon01.png" alt="" class="ab pic">
                        <input name="weixin" type="text" class="radius0 ab inputElement" placeholder="请输入微信号"
                               autocomplete="off" required/>
                    </li>
                </ul>
                {/case}
                {default /}
                {/switch}


                <h3 class="smallTitle">输入手机号</h3>
                <ul class="inputBox">
                    <li class="radius5 re">
                        <img src="__ADDON__/aform/images/mobile/icon02.png" alt="" class="ab pic">
                        <input name="phone" id="phone" type="tel" class="radius0 ab inputElement" placeholder="请输入手机号"
                               autocomplete="off" required/>
                    </li>
                </ul>
            </div>
            <!--引入题库问题开始!-->
            {notempty name="ques"}
            {volist name="ques" id="vo" key="quesKey"}

            {eq name="vo.type" value="input"}
            <h3 class="smallTitle">{$vo.name}</h3>
            <ul class="inputBox">
                <li class="radius5 re">
                    <input autocomplete="off" required name="input{$vo.id}" type="text" class="radius0 ab inputElement"
                           style="left:0rem;border-left:solid 0px #cdd8e0"/>
                </li>
            </ul>
            {/eq}

            <!--单选start-->
            {eq name="vo.type" value="radio"}
            <h3 class="smallTitle">{$vo.name}</h3>
            {foreach name="vo.type_desc" item="vos" key="key"}
            <label style="font-size: 0.33rem;line-height: 0.8rem;"><input
                    value="<?php echo $vo['type_desc_relation'][$key]; ?>" required name="radio{$vo.id}"
                    autocomplete="off" type="radio"
                    style="width:0.4rem;height:0.4rem;"/>&nbsp;<span
                    style="line-height: 0.4rem;">{$vos}</span></label><br>
            {/foreach}
            <!--后续关联数据-->
            <div id="relate{$vo.id}">

            </div>
            {/eq}
            <!--单选end-->

            <!--多选start-->
            {eq name="vo.type" value="checkbox"}
            <h3 class="smallTitle">{$vo.name}</h3>
            {foreach name="vo.type_desc" item="vos" key="key"}
            <label style="font-size: 0.33rem;line-height: 0.8rem;"><input
                    value="<?php echo $vo['type_desc_relation'][$key]; ?>" name="check{$vo.id}[]" autocomplete="off"
                    type="checkbox"
                    style="width:0.4rem;height:0.4rem;"/>&nbsp;<span
                    style="line-height: 0.4rem;">{$vos}</span></label><br>
            {/foreach}
            {/eq}
            <!--多选end-->

            <!--图片start-->
            {eq name="vo.type" value="image"}
            <h3 class="smallTitle">{$vo.name}</h3>
            <div class="image-box{$vo.id}"></div>
            {/eq}
            <!--图片end-->

            {/volist}
            {/notempty}
            <input type="hidden" name="fromurl_id" value="{$textinfo.id}">
            <!--引入题库问题结束-->
            <div class="center">
                <input type="hidden" name="type" id="type" value="">
                <input type="submit" value="提交" class="submitBtn"/>
            </div>
        </form>

        <div class="section03">
            {if condition="!empty($textinfo.img)"}
            <h3 class="smallTitle">说明</h3>
            <div class="center">
						<span class="qrcode radius10">
							<img src="{$textinfo.img}" alt="" class="pic">
						</span>
            </div>
            <p class="infor center">遇到问题</p>
            <p class="infor center">请联系微信号：<span class="blueText">{$textinfo.name}</span></p>
            {/if}
        </div>

    </div>
</div>
</body>

<script src="__ADDON__/aform/js/jquery-1.10.2.min.js"></script>
<script src="__ADDON__/aform/js/jquery.upload.js"></script>
<script>
    $(function () {
        $('input[name*="radio"]').on('change', function () {
            var mainName = this.name;
            $.get('{$ajaxUrl}', {'pid': $(this).val()}, function (data) {
                $('#' + 'relate' + mainName.replace('radio', '')).html(data);
                aa(mainName);
                showImgBox(mainName.replace('radio', ''));
            });
        });

        function aa(mainName) {
            $("#" + "relate" + mainName.replace("radio", "") + ' input[name*="radio"]').on('change', function () {
                var mainName = this.name;
                $.get('{$ajaxUrl}', {'pid': $(this).val()}, function (data) {
                    $('#' + 'relate' + mainName.replace('radio', '')).html(data);
                    aa(mainName);
                });
            });
        }

        showImgBox();
    });

    function showImgBox(relate = '') {
        var imageBoxSelector = relate === '' ? '[class^="image-box"]' : '#relate' + relate + ' [class^="image-box"]';

        $(imageBoxSelector).each(function (index) {
            var $imageBox = $(this);

            var className = this.className;
            var match = className.match(/\d+/);

            if (match) {
                var number = parseInt(match[0]);

                $imageBox.ajaxImageUpload({
                    fileInput: 'image' + number,
                    postUrl: '/index.php/addons/activityform/aform/upload',
                    maxNum: 9,
                    allowType: ["gif", "jpeg", "jpg", "png"],
                    maxSize: 10,
                    appendMethod: 'before',
                    allowZoom: false,
                    beforeSends: function (xhr) {
                        $.ajax({
                            url: '/index.php/addons/activityform/aform/retToken',
                            type: 'GET',
                            dataType: 'json',
                            async: false,
                            success: function (data) {
                                dataToken = data.token;
                            }
                        });
                        // console.log(dataToken);
                        // 在请求发送前，设置请求的Header
                        xhr.setRequestHeader("Authorization", "Bearer " + dataToken);
                    },
                    error: function (e) {
                        // console.log(e);
                        alert(e.msg + '(' + e.code + ')');
                    }
                });
            }
        });
    }

    //预约单选按钮样式控制
    $(".radioItemEvent").on("click", function () {
        $(this).addClass("active").siblings("li").removeClass("active");

        if ($(this).hasClass("active")) {
            valueMark = $(this).attr("mark");
            $("#type").val(valueMark);
        }
    });

    //校验手机号是否合法
    function isPhoneNum() {
        var phonenum = $("#phone").val();

        if (!(/^1[3456789][0-9]{9}$/.test(phonenum))) {
            alert('请输入有效的手机号码！');
            return false;
        }
        return true;
    }

    //根据选项展示问题
    $('input:radio[name="row[ifrelated]"]').change(function () {
        var ctypes = $(this).val();

        if ((ctypes == 'yes')) {
            $('#add_line22').css('display', 'block');
        } else {
            $('#add_line22').css('display', 'none');
        }
    });
</script>
</html>
